<template>
  <div class="sidebar-wrapper">
    <div class="logo-container">
      <router-link to="/" class="logo-link">
        <!-- <img src="@/assets/logo.png" class="sidebar-logo" alt="logo" /> -->
        <!-- <svg-icon name="bugManage" class-name="sidebar-logo" /> -->
        <h1 class="sidebar-title" v-if="!isCollapse">xxxxx</h1>
      </router-link>
    </div>

    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-active="activeMenu" :collapse="isCollapse" :unique-opened="true" :collapse-transition="false"
        mode="vertical" router>
        <sidebar-item v-for="route in menuList" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SidebarItem from './SidebarItem.vue'
import { useAppStore } from '@/stores/app'
import { usePermissionStore } from '@/stores/permission'

const route = useRoute()
const router = useRouter()
const appStore = useAppStore()
const permissionStore = usePermissionStore()

// 是否折叠
const isCollapse = computed(() => appStore.sidebarCollapsed)

// 当前激活的菜单
const activeMenu = computed(() => {
  // 如果当前路由设置了 activeMenu 属性，则使用它
  if (route.meta?.activeMenu) {
    return route.meta.activeMenu
  }
  return route.path
})

// 菜单列表
const menuList = computed(() => {
  // 初始化路由
  permissionStore.generateRoutes()
  return permissionStore.menuList
})

// 监听路由变化
watch(
  () => route.path,
  () => {
    // 在路由变化时触发可能的重新计算
    console.log('当前路由路径:', route.path)
  }
)

// 挂载后确保菜单项正确初始化
onMounted(() => {
  console.log('菜单初始化完成')
})
</script>

<style lang="scss" scoped>
.sidebar-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--sidebar-bg);

  .logo-container {
    height: 50px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .logo-link {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;

      .sidebar-logo {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }

      .sidebar-title {
        color: var(--sidebar-text-color);
        font-weight: 600;
        font-size: 16px;
        white-space: nowrap;
        margin: 0;
      }
    }
  }

  .el-menu {
    border-right: none;
    background-color: var(--sidebar-bg);

    :deep(.el-menu-item) {
      color: var(--sidebar-text-color);
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 8px;
        color: inherit;
      }

      &:hover {
        background-color: var(--sidebar-item-hover);
      }

      &.is-active {
        background-color: var(--sidebar-item-active);
        color: var(--primary-color);
      }
    }

    :deep(.el-sub-menu__title) {
      color: var(--sidebar-text-color);
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 8px;
        color: inherit;
      }

      &:hover {
        background-color: var(--sidebar-item-hover);
      }
    }

    :deep(.el-sub-menu.is-active .el-sub-menu__title) {
      color: var(--primary-color);
    }

    :deep(.el-sub-menu .el-menu) {
      background-color: var(--sidebar-bg);
    }
  }

  .scrollbar-wrapper {
    flex: 1;
    overflow-x: hidden;
  }
}
</style>